<template>
    <div class="my-follow-page">
      <van-search
        v-model="searchKeyword"
        placeholder="请输入医生姓名搜索"
        @input="searchDoctor"
      />
      <van-cell-group>
        <van-cell
          v-for="(doctor, index) in filteredDoctorList"
          :key="index"
          :title="doctor.doctorName"
          :label="`科室：${doctor.departmentName}  职称：${doctor.title}`"
          @click="goToDoctorDetail(doctor)"
        >
          <template #right-icon>
            <van-icon
              :name="doctor.isFollowed ? 'star' : 'star-o'"
              :class="{ 'followed': doctor.isFollowed }"
              @click.stop="toggleFollow(doctor)"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </template>
  
  <script setup>
  
  import { ref, onMounted, watch, nextTick, computed } from 'vue';
  import { getSelfFollowsAPI, addFollowAPI, deleteFollowAPI } from '../../api/follow/follow.js';


  const searchKeyword = ref('');
  const doctorList = ref([]);

  // 获取关注的医生列表
  const fetchDoctorList = async () => {
    try {
      const response = await getSelfFollowsAPI();
      doctorList.value = response.data.map(doctor => ({
        ...doctor,
        isFollowed: true
      }));
    } catch (error) {
      console.error('获取关注医生列表失败:', error);
    }
  };



  // 切换关注状态
  const toggleFollow = async (doctor) => {
    try {
      if (doctor.isFollowed) {
        await deleteFollowAPI(doctor.userId, doctor.workId);
        doctor.isFollowed = false;
      } else {
        await addFollowAPI(doctor.userId, doctor.workId);
        doctor.isFollowed = true;
      }
    } catch (error) {
      console.error('操作失败:', error);
    }
  };

  // 跳转到医生详情页
  const goToDoctorDetail = (doctor) => {
    console.log(`查看医生 ${doctor.doctorName} 的详细信息`);
  };

  onMounted(() => {
    fetchDoctorList();
  });

  const filteredDoctorList = computed(() => {
    if (!searchKeyword.value) return doctorList.value;
    return doctorList.value.filter(doctor =>
      doctor.doctorName.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
  });

  </script>
  
  <style scoped>
  .my-follow-page {
    padding: 16px;
  }
  .van-icon {
    font-size: 24px;
    cursor: pointer;
  }
  .followed {
    color: #ffd21e;
  }
  </style>